<template>
  <div class="box">
    <!-- 循环数组 生成 lable和checkbox -->
    <label v-for="(e, i) in list" :key="i">
      <input type="checkbox" :value="e" v-model="selList" />
      {{ e }}
    </label>
    <!-- 显示累加和： -->
    <div>累加和：{{ total }}</div>
  </div>
</template>

<script>
export default {
  name: "App",
  props: {},
  data() {
    return {
      list: [9, 15, 19, 25, 29, 31, 48, 57, 62, 79, 87],
      selList: [],
    };
  },
  created() {},
  methods: {},
  computed: {
    total() {
      return this.selList.reduce((sum, e) => {
        return sum + e;
      }, 0);
    },
  },
  watch: {},
  components: {},
};
</script>

<style lang="less" scoped>
.box {
  margin: 5px 10px;
  label {
    margin: 5px 10px;
  }
}
</style>
